<template>
  <section class="component task-box">
    <data-box ref="databox" row-key="id" :data="taskDataSet" :stripe="false" :rowClassName="getRowClass" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="taskType" label="类型" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.dictConvert(row.taskType,'TaskType')">
        </el-table-column>
        <el-table-column prop="name" label="名称" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="taskStatus" label="任务状态" align="center" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.dictConvert(row.taskStatus,'TaskStatus')">
        </el-table-column>
        <el-table-column prop="description" label="任务描述" align="left" :show-overflow-tooltip="true" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.startTime)">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" :min-width="$helper.getColumnWidth(5)" :formatter="(row) => $filter.dateTimeFormat(row.endTime)">
        </el-table-column>
        <el-table-column label="耗时" :min-width="$helper.getColumnWidth(5)" :formatter="row => $common.getDiffTime(row.startTime,row.endTime)">
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button size="small" @click="downLoad(scope.row.logFileUrl,'任务日志')" type="text" v-if="scope.row.logFileUrl">下载</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { TaskBoxService } from "~/services/domain-service/task-box.service";
import { PageService } from "~/utils/page.service";
import { CommonService } from "~/utils/common.service";
import { State, Mutation, Action, namespace } from "vuex-class";
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import { messageState } from "~/config/enum.config";
import { Prop, Watch } from "vue-property-decorator";

const workspaceModule = namespace("workspace");

@Component({
  components: {
    DataBox,
    DataForm
  }
})
export default class MessageBox extends Vue {
  @Prop() public visible
  @Dependencies(TaskBoxService)
  private taskBoxService: TaskBoxService;
  @Dependencies(PageService)
  private pageService: PageService;
  @workspaceModule.Action
  private updateUnReadCount;
  private taskDataSet: any[] = [];
  private downLoad: any = CommonService.downloadFile;
  private currentMessage: any = "";
  private interval: any;
  private hour: any = '';
  private minute: any = '';
  private second: any = '';
  private timestamp: any = '';
  private oo: any = '';

  @Watch("visible")
  private onVisibleChange(value) {
    if (value) {
      this.refreshData()
    }
  }

  /**
   * 刷新数据
   */
  private refreshData() {
    this.taskBoxService
      .query(this.pageService)
      .subscribe(data => {
        this.taskDataSet = data;
      });
  }

  /**
   * 获取行样式
   */
  private getRowClass(scope, index) {
    return (scope.row.taskStatus as string).toLowerCase()
  }


  /**
   * 初始化
   */
  private mounted() {
    this.refreshData()
  }
}
</script>

<style lang="less">
.task-box.component {
  .data-box {
    .el-table__row {
      &.running {
        background-color: #f8f8c8 !important;
      }
      &.failure  {
        background-color: #ffeeee !important;
      }
    }
  }
}
</style>
